<template>
  <view class="profile-page">
    <!-- 用户信息头部 -->
    <view class="user-header gradient-bg">
      <view class="user-info">
        <view class="avatar-section">
          <image class="user-avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
        </view>
        
        <view class="user-details">
          <text class="user-name">你好，{{ userInfo.nickname }}</text>
          <text class="user-days">已加入袋子派{{ userInfo.joinDays }}天</text>
        </view>
        
        <view class="user-action">
          <text class="location-icon">📍</text>
        </view>
      </view>
    </view>

    <!-- 新手任务卡片 -->
    <view class="newbie-card">
      <view class="newbie-content">
        <view class="newbie-icon">👑</view>
        <text class="newbie-text">袋子派新手</text>
      </view>
      <view class="newbie-action" @tap="goToTask">
        <text class="action-text">查看更多</text>
        <text class="action-arrow">></text>
      </view>
    </view>

    <!-- 订单管理 -->
    <view class="orders-section">
      <view class="section-header">
        <text class="section-title">订单</text>
        <view class="section-action" @tap="goToAllOrders">
          <text class="action-text">查看全部</text>
          <text class="action-arrow">></text>
        </view>
      </view>
      
      <view class="orders-grid">
        <view class="order-item" @tap="goToOrders('recycle')">
          <view class="order-icon">♻</view>
          <text class="order-text">回收订单</text>
        </view>
        
        <view class="order-item" @tap="goToOrders('bag')">
          <view class="order-icon">🛍️</view>
          <text class="order-text">回收袋订单</text>
        </view>
        
        <view class="order-item" @tap="goToOrders('mall')">
          <view class="order-icon">🎁</view>
          <text class="order-text">商城订单</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-grid">
        <view class="menu-row">
          <view class="menu-item" @tap="goToTask">
            <view class="menu-icon">📋</view>
            <text class="menu-text">任务中心</text>
          </view>
          
          <view class="menu-item" @tap="goToAddress">
            <view class="menu-icon">📍</view>
            <text class="menu-text">地址管理</text>
          </view>
          
          <view class="menu-item" @tap="goToMessages">
            <view class="menu-icon">🔔</view>
            <text class="menu-text">消息</text>
          </view>
          
          <view class="menu-item" @tap="goToRules">
            <view class="menu-icon">📄</view>
            <text class="menu-text">平台规则</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 投诉建议 -->
    <view class="feedback-section">
      <view class="feedback-card" @tap="goToFeedback">
        <view class="feedback-content">
          <text class="feedback-title">投诉与建议</text>
          <text class="feedback-points">{{ userPoints }}积分</text>
        </view>
        <text class="feedback-arrow">></text>
      </view>
    </view>
  </view>
  <!-- 自定义底部导航栏 -->
  <custom-tab-bar ref="tabBar" />
</template>

<script setup>
import CustomTabBar from '@/custom-tab-bar/index.vue'
import { ref, onMounted } from 'vue'

const userInfo = ref({
  nickname: '新用户181768768338',
  avatar: '',
  joinDays: 17
})

const userPoints = ref(1000)

onMounted(() => {
  // 设置自定义tabbar选中状态
  if (typeof getApp().globalData.setTabBarIndex === 'function') {
    getApp().globalData.setTabBarIndex(4)
  }
  
  loadUserInfo()
})

const loadUserInfo = () => {
  // 模拟从服务器获取用户信息
  userInfo.value = {
    nickname: '新用户181768768338',
    avatar: '/static/images/default-avatar.png',
    joinDays: 17
  }
  userPoints.value = 1000
}

const goToTask = () => {
  uni.navigateTo({
    url: '/pages/task/task'
  })
}

const goToAllOrders = () => {
  uni.navigateTo({
    url: '/pages/orders/orders'
  })
}

const goToOrders = (type) => {
  uni.navigateTo({
    url: `/pages/orders/orders?type=${type}`
  })
}

const goToAddress = () => {
  uni.navigateTo({
    url: '/pages/address/address'
  })
}

const goToMessages = () => {
  uni.navigateTo({
    url: '/pages/messages/messages'
  })
}

const goToRules = () => {
  uni.navigateTo({
    url: '/pages/platform-rules/platform-rules'
  })
}

const goToFeedback = () => {
  uni.navigateTo({
    url: '/pages/points-detail/points-detail'
  })
}
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 140rpx;
}

.user-header {
  padding: 40rpx 32rpx;
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar-section {
  margin-right: 24rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 6rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.user-days {
  font-size: 24rpx;
  opacity: 0.9;
}

.user-action {
  padding: 16rpx;
}

.location-icon {
  font-size: 32rpx;
}

.newbie-card {
  margin: 24rpx 32rpx;
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.1) 0%, rgba(139, 195, 74, 0.05) 100%);
  border-radius: 20rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2rpx solid rgba(139, 195, 74, 0.2);
}

.newbie-content {
  display: flex;
  align-items: center;
}

.newbie-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.newbie-text {
  font-size: 28rpx;
  color: #8BC34A;
  font-weight: 600;
}

.newbie-action {
  display: flex;
  align-items: center;
  color: #8BC34A;
}

.orders-section {
  margin: 0 32rpx 24rpx;
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.section-action {
  display: flex;
  align-items: center;
  color: #666;
}

.action-text {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.action-arrow {
  font-size: 20rpx;
}

.orders-grid {
  display: flex;
  justify-content: space-around;
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  transition: all 0.3s ease;
}

.order-item:active {
  transform: scale(0.95);
}

.order-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
  color: #8BC34A;
}

.order-text {
  font-size: 24rpx;
  color: #333;
}

.menu-section {
  margin: 0 32rpx 24rpx;
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.menu-grid {
  display: flex;
  flex-direction: column;
}

.menu-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20rpx 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx 20rpx;
  transition: all 0.3s ease;
  border-radius: 16rpx;
  min-width: 120rpx;
}

.menu-item:active {
  transform: scale(0.95);
}

.menu-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
  color: #8BC34A;
}

.menu-text {
  font-size: 24rpx;
  color: #333;
}

.feedback-section {
  margin: 0 32rpx;
}

.feedback-card {
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.feedback-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.feedback-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.feedback-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.feedback-points {
  font-size: 28rpx;
  color: #8BC34A;
  font-weight: 600;
}

.feedback-arrow {
  font-size: 24rpx;
  color: #666;
  margin-left: 16rpx;
}
</style>